<template>
  <div class="dashboard-container">
    <el-card v-model="countModel">
      <div slot="header">
        <span><strong>作业统计</strong></span>
      </div>
      <div>
        <el-row style="margin-bottom: 20px">
          <el-col span="5" style="margin-left: 50px">
            <p>设置航标</p>
            <div>
              <p><span class="card-big-font" v-bind:id="Object.keys(countModel[0][0])[0]">{{ countModel[0][0].SET_MARK }}</span></p>
            </div>
          </el-col>
          <el-col span="5" offset="1">
            <p>调整航标</p>
            <div>
              <p><span class="card-big-font" v-bind:id="Object.keys(countModel[1][0])[0]">{{ countModel[1][0].CHANGE_MARK}}</span></p>
            </div>
          </el-col>
          <el-col span="5" offset="1">
            <p>撤除航标</p>
            <div>
              <p><span class="card-big-font" v-bind:id="Object.keys(countModel[2][0])[0]">{{ countModel[2][0].REMOVE_MARK}}</span></p>
            </div>
          </el-col>
          <el-col span="5" offset="1">
            <p>航标巡检</p>
            <div>
              <p><span class="card-big-font" v-bind:id="Object.keys(countModel[3][0])[0]">{{ countModel[3][0].CHECK_MARK}}</span></p>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
    <el-card style="margin-top: 20px">
      <div slot="header">
        <span><strong>巡检统计</strong></span>
      </div>
      <div>
        <el-row style="margin-left: 50px">
          <el-col span="5">
            <p>已巡检</p>
            <div>
              <p><span class="card-big-font" v-bind:id="Object.keys(countModel[4][0])[0]">{{ countModel[4][0].CheckedCount}}</span></p>
            </div>
          </el-col>
          <el-col span="5" offset="1">
            <p>发现异常</p>
            <div>
              <p><span class="card-big-font" v-bind:id="Object.keys(countModel[5][0])[0]">{{ countModel[5][0].UnUsualCount}}</span></p>
            </div>
          </el-col>
          <el-col span="5" offset="1">
            <p>异常处理</p>
            <div>
              <p><span class="card-big-font" v-bind:id="Object.keys(countModel[6][0])[0]">{{ countModel[6][0].MaintainedCount}}</span></p>
            </div>
          </el-col>
          <el-col span="5" offset="1">
            <p>异常未处理</p>
            <div>
              <p><span class="card-big-font" v-bind:id="Object.keys(countModel[7][0])[0]">{{ countModel[7][0].UnMaintainedCount}}</span></p>
            </div>
          </el-col>
        </el-row>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  data() {
    return {
      countModel: []
    }
  },
  methods: {
    getList() {
      this.$http
        .get('/task/getCount')
        .then(res => {
          this.countModel = res.data
          console.log('countModel:%o', this.countModel)
        })
    }
  },
  created() {
    this.getList()
  }
}
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }

  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}

.card-big-font {
  font-size: 36px;
  color: #666;
  line-height: 36px;
  padding: 5px 10px;
  text-overflow: ellipsis;
  word-break: break-all;
  white-space: nowrap;
  margin-bottom: 5px;
}

.card-span-color {
  position: absolute;
  right: 15px;
}
</style>
